@import '../../style/variables.scss';

.xtopic-wrapper {
  display: flex;
  flex-direction: row;

  .main {
    width: 1030px;
    min-width: 1030px;
  }
  .side {
    margin-left: 20px;
    width: 340px;
    min-width: 340px;

    .hf-panel {
      margin-bottom: 20px;
    }
  }

  .hr {
    border-bottom: 1px solid var(--hai-ui-layout-2);
  }
}

// 讨论区使用的面包屑样式
.xtopic-breadcrumbs {
  height: 20px;
  a {
    &:hover {
      color: var(--hai-ui-blue3);
    }
  }
  a,
  span {
    font-size: 14px;
  }
}

.xtopic-breadcrumb-title {
  padding: 6px 30px;
}

@media screen and (max-width: $desktop_screen_width) {
  .xtopic-wrapper {
    width: 100%;

    .main {
      flex: 1;
      min-width: 750px;
    }

    .side {
      margin-left: 20px;
      width: 300px;
      min-width: 300px;
    }
  }
}

.xtopic-red-dot {
  color: white;
  background-color: var(--hai-ui-red3);
  font-size: 12px;
  line-height: 18px;
  min-width: 18px;
  min-height: 18px;
  border-radius: 9px;
  text-align: center;
  padding-left: 6px;
  padding-right: 6px;
  transform: scale(0.85);

  &::after {
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    content: '';
    border-radius: 20px;
    position: absolute;
    border: 3px solid var(--hai-ui-layout-1);
  }
  .app-nav-bar.hai-ui-dark &::after {
    border: 4px solid #1f2533;
  }
}

.xtopic-wrapper {
  // 目前只有 XTopic 的入门视频等在用，定制一下 video，避免遮挡我们视频底部的进度条：
  video::-webkit-media-controls-panel {
    background: transparent !important;
  }
}
